<template>
  <div class="edit-family-member-dialog">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="720px">
      <div class="title" slot="title">编辑家庭成员</div>
      <div class="edit-content">
        <div class="left-item">
          <div>
            <el-input placeholder="输入手机号后4位，从就诊卡中检索用户" clearable v-model="searchKeywords"/>
          </div>
          <div>
            <el-checkbox-group v-model="checkUserList">
              <div v-for="member in searchMembers" :key="member.id" class="member-checkbox">
                <el-checkbox :label="member.id">
                  <span>{{ member.name }}</span>
                  <span style="margin-left: 10px">{{ member.mobile }}</span>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
        <div class="right-item">
          <div style="margin-left: 10px">已选中[<span style="color: #FF6F35">{{selectedMembers.length}}</span>]人</div>
          <div v-for="member in selectedMembers" :key="member.id" class="selected-member">
            <span>{{member.name}}</span>
            <span>{{member.mobile}}</span>
          </div>
          <div class="bind-member">
            <div>已绑定家庭成员（<span style="color: #FF6F35">默认把就诊卡列为家庭成员</span>）</div>
            <div  v-for="member in bindMembers" :key="member.id" style="display: flex;align-items: center;justify-content: space-between">
              <div style="margin-top: 10px">
                <span>{{member.name}}</span>
                <span style="margin-left: 20px;">{{member.mobile}}</span>
              </div>
              <div @click="deleteMember(member.id)"><i class="el-icon-delete"></i></div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSelect">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'editFamilyMember',
  data () {
    return {
      dialogVisible: false,
      checkUserList: [],
      searchKeywords: '',
      searchMembers: [],
      selectedMembers: [],
      bindMembers: []
    }
  },
  watch: {
    checkUserList (newValue) {
      const ids = JSON.stringify(newValue)
      this.selectedMembers = this.searchMembers.filter(member => {
        return ids.includes(member.id)
      })
    }
  },
  methods: {
    show () {
      this.bindMembers = []
      for (let i = 1; i < 4; i++) {
        this.bindMembers.push(
          { id: i, name: '陈磊' + i, mobile: '1823888888' + i }
        )
      }
      this.searchMembers = []
      for (let i = 1; i < 4; i++) {
        this.searchMembers.push(
          { id: i, name: '琳琳' + i, mobile: '1823888888' + i }
        )
      }
      this.dialogVisible = true
    },
    deleteMember (id) {
      this.$alert('确认删除此用户？', '确认', {
        confirmButtonText: '确定',
        callback: () => {
          this.bindMembers = this.bindMembers.filter(member => member.id !== id)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }
      })
    },
    confirmSelect () {
      console.log(this.selectedMembers)
      this.$emit('selectFamilyMember', this.selectedMembers)
      this.dialogVisible = false
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.edit-family-member-dialog {
  .title {
    border-bottom: 1px solid #e5e1e1;
    padding-bottom: 10px;
    font-size: 16px;
  }
  .edit-content {
    display: flex;
    justify-content: space-between;
    margin-top: -20px;
    .left-item {
      width: 50%;
      background: #F6F8FA;
      flex-grow: 1;
      padding: 20px;
      .member-checkbox {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
      }
    }
    .right-item {
      width: 50%;
      background: #F6F8FA;
      flex-grow: 1;
      margin-left: 30px;
      padding: 10px;
      .selected-member{
        margin: 10px 0 0 10px;
      }
      .bind-member{
        margin-top: 100px;
        padding: 20px 0 0 0;
        border-top: 1px dashed #E6E6E6;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
